import {initState} from './state'

import {compileToFunction} from './compiler/index.js'
// 在原型上添加一个 init 方法
export function initMixin(Vue){
    // 初始化流程
    Vue.prototype._init = function(options){
        // 数据的 劫持
        const vm = this; // vue 中使用 this.$options 指代的就是用户传递的属性
        vm.$options = options;

        initState(vm); // 分隔代码


        // 如果用户传入了 el数据，需要页面渲染
        // 如果用户传入了 el， 就要实现挂载流程

        if(vm.$options.el){
            vm.$mount(vm.$options.el)
        }
    }
    function query(el){
        if(el==='String'){
            return document.querySelector(el);
        }
        return;
    }

    Vue.prototype.$mount = function(el){
        const vm = this;
        const options = vm.$options;
        el = vm.$el = query(el)
        // 默认先查找有没有 render 方法，没有render会采用template template也没有就用el中的内容

        let updateComponent = ()=>{
            console.log("更新和渲染的实现")
        }

        // new Watcher(vm,updateComponent)

        if(!options.render){
            //对模板进行编译
            let template = options.template; //取出模板
            if(!template && el){
                template = el.outerHTML;
            }

            
            const render = compileToFunction(template); //把template挂载
            options.render = render;
            // 我们将 template 转化为render方法，需要使用 虚拟DOM 
        }
    }
}
